<template>
  <d-table
    :columns="columns"
    :dataSource="tableData"
  >
    <template #name="{text}">
      <TeamOutlined style="color: #03a9f4;"/>
      {{ text }}
    </template>
  </d-table>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { TeamOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'ScopeSlotDemo',
  components: { TeamOutlined },
  setup () {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        slots: {
          customRender: 'name'
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address'
      }
    ]

    const tableData = ref([
      {
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
        key: '1'
      },
      {
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
        key: '2'
      }
    ])

    return {
      columns,
      tableData
    }
  }
})
</script>

<style scoped>

</style>
